<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>js-tabs</title>
    <link rel="stylesheet" type="text/css" href="http://yjzhu.googlecode.com/svn/trunk/css/base.css" media="all"/>
    <style type="text/css">
    a{color:#a0b3d6;}
    .tabs{border:1px solid #a0b3d6;margin:100px;width:300px;}
    .tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;}
	.tabs-nav .current1,.tabs-nav .current2,.tabs-nav .current3,.tabs-nav .current4{background:white;border-bottom:1px solid white;_position:relative;}
    .tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;}
    </style>
</head>
<body>
    <div class="tabs" id="tabs">
        <h2 class="tabs-nav clearfix">
            <a href="javascript:;">首页</a>
            <a href="javascript:;">技术</a>
            <a href="javascript:;">生活</a>
            <a href="javascript:;">作品</a>
        </h2>
        <p class="tabs-content">首页首页首页首页首页首页首页首页首页首页</p>
        <p class="tabs-content">技术技术技术技术技术技术技术技术技术技术</p>
        <p class="tabs-content">生活生活生活生活生活生活生活生活生活生活</p>
        <p class="tabs-content">作品作品作品作品作品作品作品作品作品作品</p>
    </div>
    <br/><br/>
    <div class="tabs" id="tabs2">
        <h2 class="tabs-nav clearfix">
            <a href="javascript:;">11111</a>
            <a href="javascript:;">22222</a>
            <a href="javascript:;">33333</a>
        </h2>
        <p class="tabs-content">11111111111111111111111111111111111</p>
        <p class="tabs-content">222222222222222222222222222222222222</p>
        <p class="tabs-content">333333333333333333333333333333333333333</p>
    </div>
</body>
</html>
<script type="text/javascript" src="tabs.js"></script>
<script type="text/javascript">
window.onload = function(){
    tabs('tabs','click',true,1000);
    tabs('tabs2','mouseover');
}
</script>